<template>
    <van-nav-bar title="用户列表" left-arrow @click-left="$router.back()" />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      @load="fetchData"
    >
      <van-cell v-for="user in list" :key="user.id" :title="user.name" :label="user.email" />
    </van-list>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { fetchUsers } from '../api/modules/user'
  
  interface User {
    id: number
    name: string
    email: string
  }
  
  export default defineComponent({
    setup() {
      const list = ref<User[]>([])
      const loading = ref(false)
      const finished = ref(false)
  
      const fetchData = async () => {
        try {
          loading.value = true
          const data = await fetchUsers()
          list.value = data
          finished.value = true
        } catch (error) {
          console.error(error)
        } finally {
          loading.value = false
        }
      }
  
      return { list, loading, finished, fetchData }
    }
  })
  </script>